// 快货运核心风控数据
<template>
  <div class="riskDataPage">
    <section class="detail-block">
      <!-- <h6 class="detail-block__title">企业信息</h6> -->
      <nav class="common-nav mb20">
        <h2
          style="width: 120px"
          class="common-nav__title"
          :class="index === activeIndex ? 'tab_active' : ''"
          @click="switchNav(item, index)"
          v-for="(item, index) in navList"
          :key="index"
        >
          {{ item.name }}
        </h2>
      </nav>
    </section>
    <!-- 核心数据 -->
    <section v-show="activeIndex === 0">
      <Risktable :data="riskData"></Risktable>
    </section>
    <!-- 运单数据 -->
    <section v-show="activeIndex === 1">
      <BaseTable v-bind="tableData" :columns="columns"></BaseTable>
    </section>
    <!-- 其他资料 -->
    <section class="othenData" v-show="activeIndex === 2">
      <div>
        <h6>上游货主协议</h6>
        <el-row class="firstItem">
          <el-col :span="12" v-for="(item, index) in agreementData.ownerAgreement" :key="index">
            <span class="protocolName minW80">{{ item.fileName }}</span>
            <span class="previewFile" @click="preview(item.fileUrl)">预览</span>
            <span class="previewFile marl10" v-if="type === 1" @click="delData(item, 2)">删除</span>
            <div>
              <div>
                <span class="minW80">货主名称：</span>
                <el-input
                  v-if="type == 1 && isAudit == '0'"
                  class="mr10 maxW200"
                  :disabled="item.isEdit"
                  v-model="item.shipperName"
                  placeholder="请输入托运方名称"
                ></el-input>
                <el-input
                  v-else
                  class="mr10 maxW200"
                  disabled
                  v-model="item.shipperName"
                  placeholder="请输入托运方名称"
                ></el-input>
              </div>
              <div>
                <span class="minW80">帐期：</span>
                <el-input
                  v-if="type == 1 && isAudit == '0'"
                  class="mr10 maxW200"
                  :disabled="item.isEdit"
                  v-model="item.accountPeriod"
                  placeholder="请输入帐期"
                ></el-input>
                <el-input
                  v-else
                  class="mr10 maxW200"
                  disabled
                  v-model="item.accountPeriod"
                  placeholder="请输入帐期"
                ></el-input
                >天
                <span v-if="type == 1 && isAudit == '0'">
                  <span class="previewFile marl10" v-if="item.isEdit" @click="editData(item, 0)">编辑</span>
                  <span class="previewFile marl10" v-else @click="editData(item, 1)">保存</span>
                </span>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row class="secondItem" v-if="false">
          <h6>平台签约的托运协议</h6>
          <el-col :span="12" v-for="item in agreementData.platformApplyAgreement" :key="item.id">
            <span class="protocolName">{{ item.fileName }}</span>
            <span class="previewFile" @click="preview(item.fileUrl)">预览</span>
            <span class="previewFile marl10" v-if="type === 1" @click="delData(item)">删除</span>
          </el-col>
        </el-row>
        <el-row class="thirdItem" v-if="pagetype === '1'">
          <h6>回款账号变更协议</h6>
          <el-col :span="12" v-for="item in agreementData.changeAgreement" :key="item.id">
            <span class="protocolName">{{ item.fileName }}</span>
            <span class="previewFile" @click="preview(item.fileUrl)">预览</span>
            <span class="previewFile marl10" v-if="type === 1" @click="delData(item)">删除</span>
          </el-col>
        </el-row>
      </div>
    </section>
  </div>
</template>

<script>
import Risktable from './Risktable.vue'
import BaseTable from '@/components/BaseTable/index.vue'
export default {
  name: 'RebateRegionCount',
  components: {
    Risktable,
    BaseTable,
  },
  props: {
    rebateRegionCount: Array,
    pagetype: String,
    type: {
      type: String,
      default: "'0'",
    },
    isAudit: {
      type: String,
      default: "''",
    },
  },
  data() {
    return {
      activeIndex: 0,
      columns: [
        { label: '平台名称', prop: 'platformName' },
        { label: '托运方名称/姓名', prop: 'shipperName' },
        { label: '托运单号', prop: 'shipNumber' },
        { label: '运单开单时间', prop: 'transportBillDateTime' },
        { label: '运单发货时间', prop: 'loadingTime' },
        { label: '运单收货时间', prop: 'unloadingTime' },
        { label: '托运方社会信用代码', prop: 'shipperIdNum' },
        { label: '网络货运平台社会信用代码', prop: 'platformIdNum' },
        { label: '发货地址', prop: 'consignerAddrDes' },
        { label: '收货方地址', prop: 'consigneeAddrDes' },
        { label: '运单完成日期', prop: 'endTime' },
        { label: '客户运费', prop: 'shippingFee' },
        { label: '风控等级', prop: 'riskLevel' },
      ],
      navList: [
        { name: '核心风控数据', id: 1 },
        { name: '运单信息', id: 2 },
        { name: '其他资料', id: 3 },
      ],
      tableData: {
        pagination: {
          pageNo: 1,
          pageSize: 10,
          total: 0,
        },
        data: [],
        onChange: pagination => {
          Object.assign(this.tableData.pagination, pagination)
          this.getDetailOrderRequest()
        },
      },
      riskData: [], //风控数据
      agreementData: {
        changeAgreement: [], //变更协议
        ownerAgreement: [],
        platformApplyAgreement: [], //平台协议
      }, //协议数据
      // isEdit: false, //是否能支持编辑
    }
  },
  methods: {
    switchNav(item, index) {
      if (this.activeIndex === index) return
      this.activeIndex = index
    },

    async getDetailRequest() {
      //获取运单数据
      const uscCode = this.$route.query.uscCode || ''
      const res = await this.$http.post('/credit_applys/getKhyApplyInfo/', uscCode)
      this.riskData = res.riskControlRsps || []
      this.agreementData = { ...res.agreementInfos }
      const { ownerAgreement } = this.agreementData
      if (ownerAgreement.length) {
        ownerAgreement.map(item => {
          this.$set(item, 'isEdit', false)
        })
      }
      this.agreementData.ownerAgreement = ownerAgreement
    },
    async getDetailOrderRequest() {
      //获取运单数据
      const res = await this.$http.post('/credit_applys/getKhyApplyOrderInfo', {
        uscCode: this.$route.query.uscCode,
        current: this.tableData.pagination.pageNo,
        limit: this.tableData.pagination.pageSize,
      })

      this.tableData.data = res.records || []
      this.tableData.pagination.total = res.total
    },
    preview(url) {
      window.open(url, '__blank')
    },
    delData(data, type) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const obj = {
            // uscCode: data.uscCode || '',
            // fundCode: this.itemDetail.fundCode || '',
            // productCode: this.itemDetail.productCode || '',
            number: data.id,
          }
          console.log('data==', obj)
          await this.$http.post('/credit_applys/removeAgreement/', obj)
          this.getDetailRequest()
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {})
    },
    editData(data, type) {
      data.isEdit = !data.isEdit
      const obj = {
        protocalId: data.id,
        shipperName: data.shipperName,
        accountPeriod: data.accountPeriod,
      }
      type && (obj.shipperName || obj.accountPeriod) ? this.updateProtocol(obj) : ''
      // console.log(1111)
    },
    async updateProtocol(data) {
      // const res =
      await this.$http.post('/credit_applys/updateProtocol/', data)
      // const data2 = res
    },
  },
  mounted() {
    this.getDetailRequest()
    this.getDetailOrderRequest()
  },
}
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.riskDataPage {
  .othenData {
    .protocolName {
      margin-right: 10px;
      display: inline-block;
    }
    .previewFile {
      cursor: pointer;
      color: #02a7f0;
      display: inline-block;
      &.marl10 {
        margin-left: 10px;
      }
    }
    .secondItem {
      margin: 20px 0;
    }
    h6 {
      padding: 10px 0;
    }
  }
  .maxW200 {
    max-width: 200px;
    margin-bottom: 10px;
  }
  .minW80 {
    display: inline-block;
    min-width: 80px;
  }
}
</style>
